<script setup>
import { ref } from 'vue';
import axios from 'axios';

const loginForm = ref({
  username: 'admin',
  password: '123456',
  captcha: ''
});

const captcha = ref(generateCaptcha());

function generateCaptcha() {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let result = '';
  for (let i = 0; i < 4; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return result;
}

const refreshCaptcha = () => {
  captcha.value = generateCaptcha();
};

const submitForm = async () => {
  try {
    // 打印表单值用于调试
    console.log(loginForm.value);

    // 验证码验证
    if (loginForm.value.captcha.toUpperCase() !== captcha.value.toUpperCase()) {
      alert('验证码错误');
      refreshCaptcha();
      return;
    }

    // 发送 Get 请求
    const response = await axios.get('http://localhost:8000/getuser');

    // 处理服务器返回的数据
    const users = response.data;

    // 检查登录表单中的值是否与后端返回的数据匹配
    const matchedUser = users.find(user => 
      user.username === loginForm.value.username && 
      user.password === loginForm.value.password
    );

    if (matchedUser) {
      alert('登录成功');
      const tokenMap = await axios.get('http://localhost:8000/getToken');
      const token = tokenMap.data.token;
      window.localStorage.setItem('token', token);

      // 跳转到首页
      window.location.href = '/';
    } else {
      alert('用户名或密码不匹配');
    }
  } catch (error) {
    // 错误处理
    console.error('请求失败:', error);
  }
};

const resetForm = () => {
  loginForm.value.username = '';
  loginForm.value.password = '';
  loginForm.value.captcha = '';
  refreshCaptcha();
};
</script>

<template>
  <div>
    <div class="fullscreen-background">
      <div class="login-container">
        <h3 class="title">登录</h3>
        <form @submit.prevent="submitForm">
          <div class="input-group">
            <label for="username">用户名</label>
            <input id="username" v-model="loginForm.username" type="text" placeholder="请输入用户名" required>
          </div>
          <div class="input-group">
            <label for="password">密码</label>
            <input id="password" v-model="loginForm.password" type="password" placeholder="请输入密码" required>
          </div>
          <div class="captcha-group">
            <label for="captcha" style="margin-right: 10px;">验证码</label>
            <input id="captcha" v-model="loginForm.captcha" type="text" placeholder="请输入验证码" required>
            <span @click="refreshCaptcha">{{ captcha }}</span>
          </div>
          <div class="button-group">
            <button type="submit" class="submit-button">登录</button>
            <button type="button" @click="resetForm">重置</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<style scoped>
.fullscreen-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* 使用 vh 单位确保高度适应视口 */
  background-image: url('../../assets/images/loginbg.jpg'); /* 替换为你的图片路径 */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover; /* 使图片覆盖整个容器 */
}

.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.title {
  text-align: center;
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 15px;
  width: 100%;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
}

.input-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.captcha-group {
  margin-bottom: 15px;
  width: 100%;
  display: flex;
  align-items: center;
}

.captcha-group label {
  display: block;
  margin-bottom: 5px;
  flex: 1;
}

.captcha-group input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}

.captcha-group span {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  background-color: #f0f0f0;
}

.button-group {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.submit-button,
button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.submit-button {
  background-color: #4CAF50;
  color: white;
}

button {
  background-color: #f0f0f0;
  color: #333;
}
</style>